<template>
  <div>
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="ruleForms"
      size="small"
      class="demo-form-inline"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="工艺路线编号" prop="route_code">
            <el-input
              v-model="ruleForms.route_code"
              placeholder="请输入工艺路线编号"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="工艺路线名称" prop="route_name">
            <el-input
              v-model="ruleForms.route_name"
              placeholder="请输入工艺路线名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="是否启用" prop="enable_flag">
            <el-radio-group v-model="ruleForms.enable_flag">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工艺路线说明" prop="route_desc">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleForms.route_desc"
            >
            </el-input></el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleForms.remark"
            >
            </el-input></el-form-item
        ></el-col>
      </el-row>
    </el-form>

    <el-tabs type="border-card">
  <el-tab-pane label="组成工序">
    <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="adds"
          >新增</el-button
        >
    <el-table :data="tableDatas" style="width: 100%" max-height="600" v-loading="isloading">
        <el-table-column
          fixed
          prop="order_num"
          label="序号"
          width="auto"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="process_code"
          label="工序编号"
          width="auto"
        >
        </el-table-column>
<el-table-column
          align="center"
          prop="process_name"
          label="工序名称"
          width="auto"
        >
        </el-table-column>
        <el-table-column
          prop="key_flag"
          label="关键工序"
          width="auto"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.key_flag === '是' ? 'primary' : 'info'"
              disable-transitions
            >
              <div>{{ scope.row.key_flag }}</div>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="default_pre_time" label="准备时间" width="auto">
        </el-table-column>
        <el-table-column align="center" prop="default_suf_time" label="等待时间" width="auto">
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注" width="auto">
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="auto" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row.route_id)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="del(scope.row.route_id)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
  </el-tab-pane>
  <el-tab-pane label="关联产品">

  </el-tab-pane>
</el-tabs>

<el-dialog
    class="box-dialog"
    :title="titles"
    :visible.sync="dialogFormVisibles"
    :close-on-click-modal="false"
    custom-class="ss" append-to-body
  >
  <el-form
      ref="dataForms"
      :rules="ruless"
      :model="ruleFormss"
      size="small"
      class="demo-form-inline"
      label-width="100px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="序号" prop="order_num">
            <el-input-number
              v-model="ruleFormss.order_num"
              :min="1"
            ></el-input-number></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="工序" prop="process_id">
          <el-select @change="processChange" v-model="ruleFormss.process_id" placeholder="请选择">
            <el-option  v-for="(item,index) in ProcessList" :key="index" :label="item.process_name" :value="item.process_id">{{item.process_name}}</el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
          
  <el-form-item label="下一道工序" prop="link_type">
          <el-tooltip placement="right">
  <div slot="content">S-to-S：当前工序开始生产，下一道工序才可开始生产</div>
  <div slot="content">F-to-F：当前工序结束生产，下一道工序才可结束生产</div>
  <div slot="content">S-to-F：当前工序开始生产，下一道工序才可结束生产</div>
  <div slot="content">F-to-S：当前工序结束生产，下一道工序才可开始生产</div>
          <el-select v-model="ruleFormss.link_type" placeholder="请选择">
            <el-option value="S-to-S">S-to-S</el-option>
            <el-option value="F-to-F">F-to-F</el-option>
            <el-option value="S-to-F">S-to-F</el-option>
            <el-option value="F-to-S">F-to-S</el-option>
          </el-select>
</el-tooltip>

        </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="关键工序" prop="key_flag">
          <el-select v-model="ruleFormss.key_flag" placeholder="请选择">
            <el-option value="是">已启用</el-option>
            <el-option value="否">未启用</el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="准备时间" prop="default_pre_time">
            <el-input-number
              v-model="ruleFormss.default_pre_time"
              :min="0"
            ></el-input-number></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="等待时间" prop="default_suf_time">
            <el-input-number
              v-model="ruleFormss.default_suf_time"
              :min="0"
            ></el-input-number></el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="ruleFormss.remark"
            >
            </el-input></el-form-item
        ></el-col>
      </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer">
      <el-button
        style="padding: 10px 25px; margin-right: 10px"
        size="samll"
        @click="statuss"
        >取 消</el-button
      >
      <el-button
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="saves"
        type="primary"
        >确 定</el-button
      >
    </div>
</el-dialog>

    <div slot="footer" class="dialog-footer">
      <el-button
        style="padding: 10px 25px; margin-right: 10px"
        size="samll"
        @click="status"
        >取 消</el-button
      >
      <el-button
        v-if="!isupdate"
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="save"
        type="primary"
        >确 定</el-button
      >
      <el-button
        v-if="isupdate"
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="update"
        type="primary"
        >修 改</el-button>
    </div>
    </div>
</template>

<script>
export default {
props: {
  isloading:{
    type:Boolean,
    requiredL:true
  },
    dialogFormVisibles:{
      type:Boolean,
      required:true
    },
    titles:{
      type:String,
      required:true
    },
    // tableDatas: {
    //   type: Array,
    //   required: true,
    // },
    // islook: {
    //   type: Boolean,
    //   required: true,
    // },
    isupdate: {
      type: Boolean,
      required: true,
    },
    ruleForms: {
      type: Object,
      required: true,
    },
    ruleFormss: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
    ruless: {
      type: Object,
      required: true,
    },
    tableDatas:{
      type:Array,
      require:true
    },
    ProcessList:{
      type:Array,
      required:true
    }
  },
  methods:{
    processChange(e){
      this.$emit("processChange", e);
    },
    adds(e){
          this.$emit("adds", e);
    },
    update(e){
this.$refs.dataForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("update", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    statuss(e) {
      this.$emit("statuss", e);
    },
    saves(e) {
      this.$refs.dataForms.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("saves", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    status(e) {
      this.$emit("status", e);
    },
    save(e) {
      this.$refs.dataForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("save", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
}
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>